<template>
	<div class="myorder">
		<div class="useropinionTitle">我的订单</div>
		<div class="myorderText" v-if="datas!=''">
			<div class="myorderText-title">
				<span :class="{bgchange:changeActive==0}" @click="bgchange(0)">全部</span>
				<span :class="{bgchange:changeActive==1}" @click="bgchange(1)">待付款</span>
				<span :class="{bgchange:changeActive==2}" @click="bgchange(2)">待发货</span>
				<span :class="{bgchange:changeActive==3}" @click="bgchange(3)">待收货</span>
				<span :class="{bgchange:changeActive==4}" @click="bgchange(4)">待评价</span>
				<span :class="{bgchange:changeActive==5}" @click="bgchange(5)">退款/售后</span>
				<span :class="{bgchange:changeActive==6}" @click="bgchange(6)">已完成/关闭</span>
				<router-link to="">订单回收站</router-link>
			</div>
			<orderdetail v-for="data in datas" v-bind:key="data.userorderid" :data="data"></orderdetail>
			<el-pagination  @current-change="handleCurrentChange" :current-page="1"
			layout="prev, pager, next, jumper"  :background="true" class="fenxi" :page-count="allcount" :hide-on-single-page="true">
			</el-pagination>
			<div class="noorder" v-if="datas==''">
				<div class="noorder-left"><div></div></div>
				<div class="noorder-right">
					<div>您还没有订单哦！</div>
					<div><router-link to="/firstindex">去首页看看</router-link></div>
				</div>
			</div>
		</div>
	</div>
</template>

<script>
	import orderdetail from '../components1/orderdetali.vue'
	export default {
		components:{orderdetail},
		data(){
			return{changeActive:0,
				datas:null,
				// currentPage3: 5,
				allcount:5
			}
		},
		// created(){
		// 	var userphone=localStorage.getItem("userphone");
		// 	var _this=this;
		// 	this.$axios.post("http://localhost:3000/userinfor/userorder",{userphone:userphone})
		// 	.then(function(response){
		// 		window.console.log(response)
		// 		var list=response.data;
		// 		if(list.code==200){
		// 			_this.datas=list.text;
		// 			_this.allcount=list.zongyeshuo
		// 		}
		// 	}).catch(function (error) {
		// 			window.console.log(error);
		// 		})
		// },
		methods:{
			bgchange(number){
				this.changeActive=number;
				var userphone=localStorage.getItem("userphone");
				var _this=this;
				if(number!=0){
					// window.console.log(number);
					this.$axios.post("http://localhost:3000/userinfor/userorderstate",{userphone:userphone,userorderstate:number})
					.then(function(response){
						var list=response.data;
						if(list.code==200){
							_this.datas=list.text;
							_this.allcount=list.zongyeshuo
						}
					}).catch(function (error) {
							window.console.log(error);
						})
				}else if(number==0){
					this.$axios.post("http://localhost:3000/userinfor/userorder",{userphone:userphone})
					.then(function(response){
						// window.console.log(response)
						var list=response.data;
						if(list.code==200){
							_this.datas=list.text;
							_this.allcount=list.zongyeshuo
						}
					}).catch(function (error) {
							window.console.log(error);
						})
				}
			},
			handleCurrentChange(val) {
				window.console.log(`当前页: ${val}`);
				var userphone=localStorage.getItem("userphone");
				var _this=this;
				this.$axios.post("http://localhost:3000/userinfor/orderpageChange",{userphone:userphone,page:val})
				.then(function(response){
					// window.console.log(response)
					var list=response.data;
					if(list.code==200){
						_this.datas=list.text;
					}
				}).catch(function (error) {
						window.console.log(error);
					})
			}
		}
	}
</script>

<style>
	.myorder{
		border: 1px solid #c1c1c1;
	}
	.myorderText-title {
		width: 90%;
		height: 22px;
		padding-top: 26px;
		margin-left: 5%;
		font-size: 15px;
	}
	.myorderText-title span {
		float: left;
		width: 12%;
		border-right: 1px solid #c1c1c1;
		text-align: center;
	}

	.myorderText-title span:nth-of-type(7) {
		border: none;
	}

	.myorderText-title a {
		float: right;
		color: #2E9E3B;
		text-decoration: underline;
	}

	.bgchange {
		background: #f08200;
	}
	.fenyeqi{
		margin-top: 20px;
		margin-bottom: 20px;
		width: 80%;
		margin-left: 10%;
	}
	.noorder{
		width: 100%;
		height: 446px;
	}
	.noorder-left,.noorder-right{
		width: 50%;
		height: 100%;
		float: left;
	}
	.noorder-left div{
		width: 78px;
		height: 100px;
		background:url("../assets/img/banner-13.png") no-repeat;
		background-size: 100% 100%;
		margin-top: 186px;
		float: right;
	}
	.noorder-right div:nth-of-type(1){
		margin-top: 186px;
		margin-left: 5%;
	}
	.noorder-right div:nth-of-type(2){
		margin-left: 5%;
		margin-top: 30px;
		width: 170px;
		height: 42px;
		line-height: 42px;
		background: #f08200;
		text-align: center;
		border-radius: 10px;
	}
	.noorder-right a{
		color: white;
	}
	.fenxi{
		width: 80%;
		/* margin: auto; */
		margin-left: 35%;
		height: 50px;
		line-height: 50px;
		margin-top: 20px;
	}
</style>
